<template>
    <div class="header">
            <!-- 左侧logo部分 -->
            <div class="left_title">
                <span>{{name}} - 2022</span>
            </div>
            <!-- 面包屑 -->
            <Crumb></Crumb>
            <!-- 右侧全屏，头像，退出登录功能 -->
            <div class="right_all">
                <!-- 全屏 与 取消全屏 -->
                <div v-if="isFullScreen" class="iconfont icon-quanping" @click="fullScreen" title="全屏"></div>
                <div v-else class="iconfont icon-quxiaoquanping" @click="exitScreen" title="取消全屏"></div>
                <!-- 头像 -->
                <img class="headimg" src="@/assets/image/12.jpg" alt="" @click="headEvent">
                <!-- 退出登录 -->
                <el-popconfirm
                title="您确定要退出登陆吗 ？"
                icon-color="red"
                @confirm="confirm"
                >
                  <div class="exit" slot="reference">退出登录</div>
                </el-popconfirm>
            </div>
    </div>
</template>

<script>
// 引入面包屑组件
import Crumb from '@/components/Crumb/Crumb.vue'
import screenfull from 'screenfull'
export default {
    components:{
        Crumb
    },
    data(){
        return {
            isFullScreen : true,
            name : JSON.parse(sessionStorage.getItem('userName')).username
        }
    },
    methods:{
        // 全屏
        fullScreen(){
            // 全屏
            screenfull.request()
            // 改变信号量，为了展示不同的图标
            this.isFullScreen = false
        },
        // 取消全屏
        exitScreen(){
            // 退出全屏
            screenfull.exit()
            // 改变信号量，为了展示不同的图标
            this.isFullScreen = true
        },
        // 头像点击事件
        headEvent(){
            this.$message({
                type : 'warning',
                message : '这个人很懒, 他不想开发头像',
                duration : 1500
            })
        },
        // 退出登录
        confirm(){
            // 清除本地所有缓存
            sessionStorage.clear()
            // 跳转到登录页
            this.$router.replace('/login')
            // 清空仓库,让当前页面刷新
            window.location.reload()
            // 给出提示
            this.$message({
                type : 'success',
                message : '退 出 成 功 !',
                duration : 1500
            })
        }
    }
}
</script>

<style scpoed>
    .header{
        height: 60px;
        background-color: rgba(0,0,0,.5);
        box-shadow:0px 0px 5px 5px #20AAE9;
        color: #fff;
        position: relative;
    }
    .left_title{
        width: 200px;
        height: 100%;
        text-align: center;
        line-height: 60px;
        font-size: 25px;
        font-weight: 600;
        box-shadow:0px 0px 5px 5px #20AAE9;
        border-radius: 20px;
    }
    .left_title span{
        text-shadow: 2px 2px 10px  #20AAE9;
    }
    .right_all{
        width: 300px;
        /* background-color: cyan; */
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .iconfont{
        width: 30px;
        height: 30px;
        font-size: 35px !important;
        cursor: pointer;
        margin-bottom: 5px;
        text-shadow: 2px 2px 10px  #20AAE9;
    }
    
    .headimg{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
        box-shadow: 0px 0px 5px 5px #20AAE9;
    }
    .headimg:hover{
        box-shadow: 0px 0px 10px 10px #20AAE9;
    }
    .exit{
        width: 80px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        box-shadow: 0px 0px 5px 5px #20AAE9;
        border-radius: 10px;
        font-size: 14px;
        letter-spacing: 2px;
        cursor: pointer;
    }
    .exit:hover{
        box-shadow: 0px 0px 10px 10px #20AAE9;
    }
    .el-popover{
        background-color: rgba(0,0,0,.8);
        color: #fff;
        letter-spacing: 2px;
    }
    .el-popper[x-placement^=bottom] .popper__arrow::after{
        border-bottom-color: rgba(0,0,0,.5);
    }
    .el-button--primary{
        background-color: black;
        border: 1px solid #20AAE9;
        box-shadow: 0px 0px 2px 2px #20AAE9;

    }
    .el-button--primary:hover{
        background-color: rgba(0,0,0,.5);
        box-shadow: 0px 0px 3px 3px #20AAE9;
    }
    .el-button--text{
        color: #fff;
    }
</style>